<%@ page language="java" import="java.util.*" pageEncoding="utf-8" isELIgnored="false" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录嗨购</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/higou.png" />
    <link rel="stylesheet" type="text/css" href="static/css/login.css" />
    <link rel="stylesheet" type="text/css" href="static/css/top.css" />
    <link rel="stylesheet" type="text/css" href="static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="static/css/jsp.css" />
    <link rel="stylesheet" type="text/css" href="static/css/swiper-4.3.3.min.css" />
    <script src="static/js/swiper-4.3.3.min.js"></script>
</head>
<body>
<!-- 注意，验证码本身是不需要 jquery 库，此处使用 jquery 仅为了在 demo 使用，减少代码量 -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>

<!-- 引入 gt.js，既可以使用其中提供的 initGeetest 初始化函数 -->
<script src="static/js/gt.js"></script>
<div id="header_container">
    <div id="logo">
        <img src="static/img/higou.png" id="logoimg">
        <div class="header_logo_box">
            <a href="#" rel="nofollow" class="top_link lightning" <%--target="_blank"--%>></a>
            <a href="#" rel="nofollow" class="top_link gild" <%--target="_blank"--%>></a>
            <a href="#" rel="nofollow" class="top_link credit" <%--target="_blank"--%>></a>
        </div>
    </div>
</div>

<div id="loginWrap" style="height: 476px; margin-bottom: 50px;">

    <div class="swiper-container" style="z-index: -1">
        <div class="swiper-wrapper" >
            <div class="swiper-slide"><img src="static/img/loginPic.jpg"></div>
            <div class="swiper-slide"><img src="static/img/loginPic.jpg"></div>
            <div class="swiper-slide"><img src="static/img/loginPic.jpg"></div>
        </div>
    </div>


    <div id="loginBord">
        <div id="r_login" >
            <form <%--action="${pageContext.request.contextPath}/CheckLoginServlet.do" method="post"--%>>
                <div class="loginTit">
                    <div class="tosignup">还没有嗨购帐号？<a href="register.jsp">30秒注册</a></div>
                    <h1><strong>登录嗨购</strong></h1>
                </div>
                <br>
                <div>
                    <label for="u_tel">手机号：</label>
                    <input class="inp" id="u_tel" type="text" placeholder="请输入注册时使用的11位手机号">
                </div>
                <br>
                <br>
                <div>
                    <label for="password">密码：</label>
                    <input class="inp" id="password" type="password" placeholder="默认密码123456">
                </div>
                <br>
                <br>
                <div>
                    <label>验证：</label>
                    <div id="captcha2">
                        <p id="wait2" class="show">正在加载验证码......</p>
                    </div>
                </div>
                <br>
                <br>
                <p>
                    <a href="forget.jsp" class="fr">忘记密码?</a>
                    <label for="auto_login" id="auto_login_label">
                        <input type="checkbox" id="auto_login">
                        &nbsp;自动登录
                    </label>
                </p>
                <p id="notice" class="hide">请先完成验证</p>
                <input class="btn" id="submit" type="submit" value="登录">
            </form>
        </div>

        <div class="shadow_l"></div>
        <div class="shadow_r"></div>
    </div>
</div>

</div>
<script>
    var handler = function (captchaObj) {

        $("#submit").click(function (e) {
            var result = captchaObj.getValidate();
            if (!result) {
                $("#notice").show();
                setTimeout(function () {
                    $("#notice").hide();
                }, 2000);
            } else {
                $.ajax({
                    url: 'gt/ajax-validate2',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        auto_login: document.getElementById("auto_login").checked,
                        u_tel: $('#u_tel').val(),
                        password: $('#password').val(),
                        geetest_challenge: result.geetest_challenge,
                        geetest_validate: result.geetest_validate,
                        geetest_seccode: result.geetest_seccode
                    },
                    success: function (data) {
                        if (data.status === 'success') {
                            // alert('登录成功');
                            location.href="index.jsp";
                        }else if (data.status ==='mgr'){
                            console.log("已验证为管理员")
                            location.href="jump.jsp?flag=container-myorder"
                        } else if (data.status === 'fail') {
                            alert('用户名或密码输入错误请重试!');
                            captchaObj.reset();
                        }
                    }
                })
            }
            e.preventDefault();
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
        captchaObj.appendTo("#captcha2");
        captchaObj.onReady(function () {
            $("#wait2").hide();
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        url: "gt/register2?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 调用 initGeetest 初始化参数
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                product: "float", // 产品形式，包括：float，popup
                width: "100%"
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handler);
        }
    });
</script>
</body>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,//可选选项，自动滑动
    })
</script>
</html>